<script>
  import NotFound from "./pages/NotFound.svelte";
  import A from "./test/About.svelte";
  import H from "./test/Home.svelte";
  import PrivateRoute2 from "./test/PrivateRoute2.svelte";
  import { Router, Route } from "svelte-routing";

  let current = A;

  function toggle() {
    current = current === A ? H : A;
  }
</script>

<div class="w-full h-screen bg-gray-700">
  <div class="max-w-md mx-auto space-x-2 pt-40 border-gray-400 text-gray-100">
    <button
      on:click={toggle}
      class="px-4 py-2 bg-gray-500 text-white rounded-md mb-6">切换组件</button
    >
    <Router>
      <Route path="/:id" let:params>
        <!-- <PrivateRoute2 component={current} id={params.id} /> -->
        <PrivateRoute2 component={current} {...params} />
      </Route>
      <Route path="*" component={NotFound} />
    </Router>
  </div>
</div>
